<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div class="container">
    <h2>用户注册</h2>
    <form th:action="@{/register}" th:object="${user}" method="post">
        <div class="form-group" th:class="${#fields.hasErrors('fullName')} ? 'form-group has-error' : ''">
            <label for="fullName">全名:</label>
            <input type="text" class="form-control" id="fullName" th:field="*{fullName}" required>
            <span th:if="${#fields.hasErrors('fullName')}" th:errors="*{fullName}" class="help-block"></span>
        </div>
        <div class="form-group" th:class="${#fields.hasErrors('email')} ? 'form-group has-error' : ''">
            <label for="email">电子邮件:</label>
            <input type="email" class="form-control" id="email" th:field="*{email}" required>
            <span th:if="${#fields.hasErrors('email')}" th:errors="*{email}" class="help-block"></span>
        </div>
        <div class="form-group" th:class="${#fields.hasErrors('password')} ? 'form-group has-error' : ''">
            <label for="password">密码:</label>
            <input type="password" class="form-control" id="password" th:field="*{password}" required>
            <span th:if="${#fields.hasErrors('password')}" th:errors="*{password}" class="help-block"></span>
        </div>
        <div class="form-group">
            <label for="birthday">生日 (yyyy-mm-dd):</label>
            <input type="date" class="form-control" id="birthday" th:field="*{birthday}" required>
        </div>
        <div class="form-group gender-group">
            <label>性别:</label>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" id="male" th:field="*{gender}" value="Male" required>
                <label class="form-check-label" for="male">男</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" id="female" th:field="*{gender}" value="Female" required>
                <label class="form-check-label" for="female">女</label>
            </div>
        </div>
        <div class="form-group">
            <label for="profession">职业:</label>
            <select class="form-control" id="profession" th:field="*{profession}">
                <option value="Developer">开发者</option>
                <option value="Designer">设计师</option>
                <option value="Manager">经理</option>
            </select>
        </div>
        <div class="form-group married-group">
            <label class="form-check-label" for="married">已婚?</label>
            <input type="checkbox" class="form-check-input" id="married" th:field="*{married}">
        </div>
        <div class="form-group">
            <label for="note">备注:</label>
            <textarea class="form-control" id="note" th:field="*{note}" rows="3"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">注册</button>
    </form>
    <div th:if="${successMessage}" class="alert alert-success" role="alert">
        <th:block th:text="${successMessage}"></th:block>
    </div>
    <div th:if="${errorMessage}" class="alert alert-danger" role="alert">
        <th:block th:text="${errorMessage}"></th:block>
    </div>
</div>
</body>
</html>